<template>
  <div class="app-container" v-loading="delLoading">
    <div class="head-container">
      <el-input v-model="keyWords" clearable placeholder="输入题库名称" maxlength="10" style="width: 200px;"
                class="filter-item" @keyup.enter.native="init"/>
      <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="init">搜索</el-button>
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-plus"
        @click="add">新增
      </el-button>
    </div>
    <eForm ref="form" :is-add="isAdd"/>
    <Import ref="import" :data="bankId"/>
    <el-table v-loading="loading" :data="data" size="small" style="width: 100%;" border>
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60">
      </el-table-column>
      <el-table-column label="题库名称"  prop="bankName" show-overflow-tooltip align="center"/>
     <!-- <el-table-column label="涉及专业" width="200" prop="specialtyName" show-overflow-tooltip align="center"/>
      <el-table-column label="岗位分类" width="120" prop="jobName"  align="center"/> -->
      <el-table-column label="创建人" width="120" prop="createBy"  align="center"/>
      <el-table-column label="创建时间" width="140"  align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="140"  align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="试题总数" width="90" prop="queCount"  align="center"/>
      <el-table-column label="题库配置" width="140"  align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-tag v-if="scope.row.queStatus===1" type="success">已启用</el-tag>
          <el-tag v-if="scope.row.queStatus===0" type="danger">已禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="题库描述" prop="bankDesc" show-overflow-tooltip align="center"/>
      <el-table-column label="操作" width="350" align="center" fixed="right">
        <template slot-scope="{ row }">
          <el-link type="primary" class="fontCss" @click="toImport(row)">导入题目</el-link>
         <!-- <el-divider direction="vertical"/> -->
        <!--  <el-link type="warning" class="fontCss" @click="toExport(row)">导出题目</el-link> -->
          <el-divider direction="vertical"/>
          <el-link type="info" @click="toQuestion(row)">查看题目</el-link>
          <el-divider direction="vertical"/>
          <el-link type="info" @click="toEditBank(row)">编辑</el-link>
          <el-divider direction="vertical"/>
          <el-link type="danger" @click="deleteType(row)" slot="reference" >删除</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :total="total"
      :current-page="page + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
  </div>
</template>

<script>
  import initData from '@/mixins/initData'
  import eForm from './from'
  import { parseTime } from '@/utils/index'
  import { del, exportBank } from '@/api/business/questionBank'
  import Import from './Import'
  import { Notification } from 'element-ui'

  export default {
    name: 'index',
    components: { eForm, Import },
    mixins: [initData],
    data() {
      return {
        delLoading:false,
        isAdd: false,
        loading:true,
        keyWords: '',
        bankId: {}
      }
    },
    created() {
      this.$nextTick(() => {
        this.init()
      })
    },
    methods: {
      parseTime,
      beforeInit() {
        this.url = 'question/bank-list'
        this.params = { page: this.page, size: this.size, type: 1, keyWords: this.keyWords }
        return true
      },
      add() {
        this.isAdd = true
        this.$refs.form.dialog = true
      },
      toImport(row) {
        this.bankId = {
          bankId: row.id
        }
        this.$refs.import.visible = true
      },
      toEditBank(row) {
        this.isAdd = false
        this.$refs.form.dialog = true
        this.$refs.form.form = {
          id: row.id,
          bankName: row.bankName,
          bankDesc: row.bankDesc,
          queStatus:row.queStatus,
          //specialtyId: row.specialtyId,
          //jobId: row.jobId,
          //source: row.source
        }
      },
      toQuestion(row) {
        this.$router.push({
          path: '/home/question',
          query: { id: row.id }
        })
      },
      toExport(row) {
        if(row.queCount<=0){
          this.$message({
            message: '当前题库数量为0，不允许导出！',
            type: 'warning'
          });
          return;
        }
         this.loading = true
        exportBank({ bankId: row.id }).then(res => {
          this.loading = false
          this.download(res, row)
        }).catch((err, data) => {
          this.loading = false
          if (err.response.status === 400) {
            Notification.error({
              title: "导出失败!",
              duration: 2500
            })
          } else {
            Notification.error({
              title: '服务器故障!',
              duration: 2500
            })
          }
        })
      },
      download(data, row) {
        if (!data) {
          return
        }
        const url = window.URL.createObjectURL(new Blob([data]))
        const link = document.createElement('a')
        link.style.display = 'none'
        link.href = url
        link.setAttribute('download', row.bankName + '.xlsx')
        document.body.appendChild(link)
        link.click()
      },
      deleteType(row) {
        this.$confirm('此操作将永久删除该题库及题目, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delLoading=true
          del(row.id).then(res => {
            this.$notify({
              title: '删除成功',
              type: 'success',
              duration: 2500
            })
            this.delLoading=false
            this.init()
          }).catch(() => {
             this.delLoading=false
              this.$message({
                type: 'error',
                message: '删除失败'
              });
        });
        }).catch(() => {
           this.delLoading=false
           this.$message({
             type: 'error',
             message: '已取消删除'
           });
        });
        //this.$refs[row.id].doClose()
      }
    }
  }
</script>

<style scoped>
  .fontCss{
    font-size: 13px;
  }
</style>
